<template>
  <div class="spec-preview">
    <!-- 中等图片 -->
    <img :src="defaultImage.imgUrl" />
    <div class="event" @mousemove="move"></div>
    <div class="big">
      <!-- 放大镜放大的图片 -->
      <img :src="defaultImage.imgUrl" ref="bigImg"/>
    </div>
    <div class="mask" ref="mask"></div>
  </div>
</template>

<script>
  export default {
    name: "Zoom",
    props:['imgList'],
    data(){
      return{
        defaultIndex:0
      }
    },
    mounted() {
      this.$bus.$on('changeDefaultIndex',(index) => {this.defaultIndex = index})
    },
    computed: {
      defaultImage(){
        return this.imgList[this.defaultIndex] || {};
      }
    },
    methods: {
      move(event){
        /* 
        放大镜设置的第一步，计算出鼠标的位置
        */
       let mouseX = event.offsetX;//计算鼠标的横轴坐标
       let mouseY = event.offsetY;//计算鼠标纵轴坐标
       const mask = this.$refs.mask;//拿到蒙版
       const bigImg = this.$refs.bigImg;//拿到大图

      //  为了保证鼠标在蒙版的中心，蒙版才开始移动，才需要进行下面的计算
       let maskX = mouseX - mask.offsetWidth / 2;//得到蒙版的横轴坐标
       let maskY = mouseY - mask.offsetHeight / 2;//得到蒙版的纵轴坐标

      // let maskX = mouseX;
      // let maskY = mouseY;

      // 设置左右的边界
      if(maskX < 0){
        maskX = 0;
      }else if(maskX > mask.offsetWidth){
        maskX = mask.offsetWidth
      }
      // 设置上写的边界
      if(maskY < 0){
        maskY = 0; 
      }else if(maskY > mask.offsetHeight){
        maskY = mask.offsetHeight;
      }

       mask.style.left = maskX + 'px';
       mask.style.top = maskY + 'px';
       
      //  大图反向移动
      bigImg.style.left = -2 * maskX + 'px';
      bigImg.style.top = -2 * maskY + 'px';
      }
    }
  }
</script>

<style lang="less">
  .spec-preview {
    position: relative;
    width: 400px;
    height: 400px;
    border: 1px solid #ccc;

    img {
      width: 100%;
      height: 100%;
    }

    .event {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 998;
    }

    .mask {
      width: 50%;
      height: 50%;
      background-color: rgba(0, 255, 0, 0.3);
      position: absolute;
      left: 0;
      top: 0;
      display: none;
    }

    .big {
      width: 100%;
      height: 100%;
      position: absolute;
      top: -1px;
      left: 100%;
      border: 1px solid #aaa;
      overflow: hidden;
      z-index: 998;
      display: none;
      background: white;

      img {
        width: 200%;
        max-width: 200%;
        height: 200%;
        position: absolute;
        left: 0;
        top: 0;
      }
    }

    .event:hover~.mask,
    .event:hover~.big {
      display: block;
    }
  }
</style>